<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any[]>([
  {
    id: 1,
    contacts: "John Smith",
    phone: "13800138001",
    city: "Beijing",
    merchantName: "ABC Technology Co., Ltd.",
    isMerchant: "机构",
    createdAt: "2023-10-15 14:30:22",
  },
  {
    id: 2,
    contacts: "Emily Johnson",
    phone: "13900139002",
    city: "Shanghai",
    merchantName: "XYZ Trading Group",
    isMerchant: "机构",
    createdAt: "2023-10-14 09:15:45",
  },
  {
    id: 3,
    contacts: "Michael Brown",
    phone: "13700137003",
    city: "Guangzhou",
    merchantName: "Tech Solutions Team",
    isMerchant: "团队",
    createdAt: "2023-10-12 16:45:10",
  },
  {
    id: 4,
    contacts: "Sarah Davis",
    phone: "13600136004",
    city: "Shenzhen",
    merchantName: "Innovation Partners",
    isMerchant: "机构",
    createdAt: "2023-10-11 11:20:33",
  },
  {
    id: 5,
    contacts: "Robert Wilson",
    phone: "13500135005",
    city: "Hangzhou",
    merchantName: "Creative Minds Team",
    isMerchant: "团队",
    createdAt: "2023-10-10 13:55:17",
  },
]);
</script>

<template>
  <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
    <umrp-search-card>
      <umrp-row :gutter="12">
        <umrp-col :span="8">
          <umrp-form-item label="联系人">
            <umrp-input placeholder="请输入联系人的姓名"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="所在城市">
            <umrp-input placeholder="请输入所在城市"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="客户类型">
            <umrp-select>
              <umrp-option value="1">机构</umrp-option>
              <umrp-option value="2">团队</umrp-option>
            </umrp-select>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :data="dataList">
        <template #columns>
          <umrp-table-column title="序号" data-index="id" :width="50"></umrp-table-column>
          <umrp-table-column title="联系人" data-index="contacts"></umrp-table-column>
          <umrp-table-column title="手机号码" data-index="phone"></umrp-table-column>
          <umrp-table-column title="所在城市" data-index="city"></umrp-table-column>
          <umrp-table-column title="商家名称" data-index="merchantName"></umrp-table-column>
          <umrp-table-column title="客户类型" data-index="isMerchant" :width="100"></umrp-table-column>
          <umrp-table-column title="留资时间" data-index="createdAt" :width="160"></umrp-table-column>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
</template>
